<template>
    <div class="com_box" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
        <ViewTestModel ref="test_model" />
        <ClearPlan ref="clear_ref"/>
        <ClearnLog ref="clear_log"/>
        <AddMaterialModel ref="add_model" @getModel="getModel"/>
        <EditMaterialModel ref="edit_model" @getModel="getModel"/>
        <div class="com_tab_content flexbox flexcenter flexbetween">
            <div class="com_tab_box flexbox flexcenter">
                <div class="com_tab_item" @click="selectTab(item)" :class="{'active':item.id==active}" v-for="item in tabList" :key="item.id">{{item.nickname}}</div>
            </div>
            <div class="flexbox flexcenter" v-if="active==1">
                <el-input placeholder="请输入项目名称搜索" size="small" style="width:216px" clearable @change="getDataList(1)" prefix-icon="el-icon-search" v-model="queryInfo.query">
                </el-input>
                <el-button type="primary" style="margin-left:12px" size="small" icon="el-icon-circle-plus-outline" @click="addProject">添加测试项目</el-button>
            </div>
            <el-popover placement="bottom-start" width="380" v-else-if="active==2" v-model="is_model">
                <div slot="reference" class="select_box flexbox flexcenter flexbetween">
                    <div class="flexbox flexcenter">
                        <img src="../../assets/img/model_icon.svg" alt="" class="select_icon">
                        <span class="select_text">{{modelCheck.name?modelCheck.name:'请选择模板'}}</span>
                    </div>
                    <span class="el-icon-caret-bottom"></span>
                </div>
                <div class="time_model">
                    <div class="tm_title font_16 color_01">模板</div>
                    <div class="yusuan_list">
                        <div class="yusuan_item flexbox flexcenter flexbetween" @click="selectModel(item)" :class="{'active':item.id==modelCheck.id}" v-for="(item,index) in modelList" :key="index">
                            <img src="../../assets/img/market_checked.svg" alt="" class="ys_check">
                            <div class="font_14 color_01">{{item.name}}</div>
                            <div class="yusuan_edit flexbox flexcenter">
                                <span class="icon_btn" @click.stop="editModel(item)"><img src="../../assets/img/edit_icon.svg" alt=""></span>
                                <span class="icon_btn" @click.stop="deletModel(item)"><img src="../../assets/img/ys_icon2.svg" alt=""></span>
                            </div>
                        </div>
                    </div>
                    <div class="model_btn">
                        <el-button plain size="small" style="width:100%" @click="addModel">
                            <div class="flexbox flexcenter flexjust">
                                <svg class="fill_svg btn_svg" width="16" height="16" viewBox="0 0 16 16" fill="#95A5C9" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M14 4.8L2 4.8V2.53336C2 2.24003 2.24 2.00003 2.53333 2.00003L13.4667 2.00003C13.76 2.00003 14 2.24003 14 2.53336V4.8ZM5.2 14H2.53333C2.24 14 2 13.76 2 13.4667V5.86666H5.2V14ZM13.4667 14H5.86665V5.86666L14 5.86666V13.4667C14 13.76 13.76 14 13.4667 14Z" fill="inherit" />
                                </svg>
                                添加模板
                            </div>
                        </el-button>
                    </div>
                </div>
            </el-popover>
        </div>

        <ProTable ref="pro_ref" :queryInfo="queryInfo" :total="total" :tableData="tableData" @getDataList="getDataList" @viewModel="viewModel" @clearPlan="clearPlan" @planLog="planLog" v-if="active==1" key="pro_table" />
        <CountTable ref="count_ref" v-if="active==2" key="count_table"/>
    </div>
</template>

<script>
import ViewTestModel from "./ViewTestModel";
import AddMaterialModel from "./AddMaterialModel";
import EditMaterialModel from "./EditMaterialModel";
import ProTable from "./ProTable";
import CountTable from './CountTable'
import ClearPlan from "./ClearPlan";
import ClearnLog from "./ClearnLog";
export default {
    components: {
        ViewTestModel,
        ProTable,
        CountTable,
        ClearPlan,
        ClearnLog,
        AddMaterialModel,
        EditMaterialModel
    },
    name: "",
    data() {
        return {
            modelInfo: {
                page: 1,
                limit: 9999,
            },
            tabList: [
                {
                    id: 1,
                    nickname: "测试项目列表",
                },
                {
                    id: 2,
                    nickname: "汇总数据",
                },
            ],
            active: 1,
            loading: false,
            queryInfo: {
                query: "",
                page: 1,
                limit: 20,
            },
            total: 0,
            tableData: [],
            is_model:false,
            modelCheck:{},
            modelList:[],
        };
    },
    created() {
        this.getDataList(1);
    },
    methods: {

        selectTab(item) {
            this.active = item.id;
            if(item.id==1){
                this.getDataList(1);
            }else if(item.id==2){
                this.getModel2()
            }
        },

        //获取列表
        async getDataList(page) {
            this.queryInfo.page = page;
            this.loading = true;
            const { data: res } = await this.$http.post(
                "videotest/Probject/proList",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.tableData = res.data.list;
                this.total = res.data.count;
            }
        },

        addProject() {
            this.$router.push({
                path: "/video/addproject",
            });
        },

        //获取模板
        async getModel2() {
            const { data: res } = await this.$http.post(
                "videotest/Probject/modelList",
                this.modelInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.modelList = res.data.list
                if(res.data.list.length>0){
                    this.modelCheck = res.data.list[0]
                    this.$refs.count_ref.getData(this.modelCheck)
                }
            }
        },

        //获取模板
        async getModel() {
            const { data: res } = await this.$http.post(
                "videotest/Probject/modelList",
                this.modelInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.modelList = res.data.list
            }
        },

        // 查看计划模板
        viewModel(row) {
            this.$refs.test_model.getData(row.id);
        },

        // 手动清除计划
        clearPlan(row){
            this.$refs.clear_ref.getData(row);
        },

        // 清除计划日志
        planLog(row){
            this.$refs.clear_log.getData(row);
        },

        // 选择汇总模板
        selectModel(item){
            this.is_model = false;
            this.modelCheck = item;
            this.$refs.count_ref.getData(item)
        },

        // 添加汇总模板
        addModel(){
            this.$refs.add_model.getData()
        },

        // 编辑汇总模板
        editModel(item){
            this.$refs.edit_model.getData(item)
        },

        // 删除汇总模板
        deletModel(item) {
            this.$confirm("是否要删除该模板?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    const { data: res } = await this.$http.post(
                        "videotest/Probject/modelDel",
                        {
                            id: item.id,
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.$message({
                            type: "success",
                            message: "删除成功!",
                        });
                        this.getModel()
                    }
                })
                .catch(() => {});
        },
    },
};
</script>


<style scoped>
.table_box {
    padding-top: 0;
}
.select_box{
    height: 30px;
    width: 200px;
}
.time_model{
    padding: 8px;
}
.yusuan_list{
    margin: 15px 0;
}
</style>



